<template>
  <div style="padding-top:80px;">
    <div style="position: relative ;top:0px;">
      <div class="morktradingnav">
        <div class="pointer" style="margin-left: 20px;display:flex;flex-direction: row;">
          <i class="iconfont icon-fanhui" style="margin-right:8px;margin-top:6px;" @click="back"></i>
          <div style="font-size:23px;">{{tradedetail.strategy.strategyname}}</div>
        </div>
        <div style="display:flex;flex-direction: row;">
          <!-- <div class="btn1" @click="focus()">暂停交易</div> -->
          <div
          v-if="tradedetail.state == 1"
            class="btn1"
            style="color:red;border: 1px solid red;margin:0px 20px 0px 8px;"
            @click="strategystop()"
          >关闭交易</div>
        </div>
      </div>
      <div class="morkdatanav">
        <div>
          <img style="height:80px;" src="../../../static/image/monijiaoyi.png" />
        </div>
        <div style="display: flex;flex-direction: row;">
          <div class="morkdataitem pointer">
            <div class="datafont">{{tradedetail.starttime}}</div>
            <div>模拟交易开始时间</div>
          </div>
          <div class="morkdataitem pointer">
            <div class="datafont">{{tradedetail.profit}}</div>
            <div>策略收益</div>
          </div>
          <div class="morkdataitem pointer">
            <div class="datafont">{{tradedetail.standardprofit}}</div>
            <div>实际收益</div>
          </div>
          <div class="morkdataitem pointer">
            <div class="datafont">{{tradedetail.yearprofit | keepTwoNum}}</div>
            <div>策略年化收益率</div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 100%;display:flex;">
      <!-- 左导航栏（概述，日志，代码） -->
      <div style="display:flex;">
          <div style="background-color: #797a7e;">
              <div class="left_menu pointer" :class="{menuactive:menuflag==1}" @click="menuflag1">
                  <i class="iconfont icon-jiaoyimingxi" style="font-size:35px;"></i>
                  <div>概述</div>
              </div>
              <div class="left_menu pointer" :class="{menuactive:menuflag==2}" @click="menuflag2">
                  <i class="iconfont icon-lishishuju1" style="font-size:35px;"></i>
                  <div style="width:54px;">订单详情</div>
              </div>
              <div class="left_menu pointer" :class="{menuactive:menuflag==3}" @click="menuflag3">
                  <i class="iconfont icon-ai-code" style="font-size:35px;"></i>
                  <div  style="width:54px;">持仓详情</div>
              </div>
          </div>
      </div>
      <div style="width: 100%;background-color: #e0e6eb;height:100%">
          <template>
              <router-view style="height:711px;" />
          </template>
      </div>
    </div>
    
  </div>
</template>
<style scoped>
.left_menu{
    color: #c0c3c4;
    border-bottom: 1px solid gray;
    text-align: center;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    padding: 15px 30px;
}
.menuactive{
    background: #4c4e53;
    color: #fff;
}
.morkdataitem {
  min-width: 130px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 20px 11px;
  /* background-image: url('../../../static/image/小竖线.png') right center no-repeat; */
}
.datafont {
  font-weight: 400;
  margin-bottom: 3px;
  font-size: 22px;
}
.iconfont {
  font-size: 20px;
}
.morkdatanav {
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  align-items: center;
  border-top: 1px solid #e0dede;
}
.morktradingnav {
  width: 100%;
  height: 80px;
  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 1;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn1 {
  border: 1px solid #3c7eee;
  border-radius: 4px;
  background-color: #fff;
  color: #3c7eee;
  cursor: pointer;
  padding: 8px 24px;
}
#focusbtn:hover .btn1 {
  background-color: #3c7eee;
  color: #ffffff;
}
</style>
<script>
import moment from "moment"
export default {
  data() {
    return {
      strategy_name: "小市值股票交易策略",
      menuflag:'1',
      inrecordId:'',
      SessionToken:'',
      tradedetail:''
    };
  },
  mounted(){
    this.inrecordId = localStorage.getItem('inrecordId')
    this.SessionToken = localStorage.getItem('SessionToken')
    this.gettradedetail()
  },
  filters:{
    keepTwoNum:function(value){
      value = Number(value)
      return value.toFixed(2)
    }
  },
  methods:{
    menuflag1 () {
      this.menuflag = 1
      this.$router.push('/gaishu')
    },
    menuflag2 () {
      this.menuflag = 2
      this.$router.push('/rizhi')
    },
    menuflag3 () {
      this.menuflag = 3
      this.$router.push('/daima')
    },
    back() {
      this.$router.push('/mock_trading')
    },
    strategystop(){
      this.$http.post('closeInvestment?sessionToken='+this.SessionToken+'&inrecordId='+this.inrecordId+'').then((resp) => {
        if (resp.data.status === 200) {
          this.$message.success('成功停止模拟交易')
          this.gettradeList()
        } else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    gettradedetail(){
            this.$http.get('getInTradingAccountMsg?sessionToken='+this.SessionToken+'&inrecordId='+this.inrecordId+'').then((resp) => {
                if (resp.data.status === 200) {
                    let day =resp.data.data.day
                    this.$http.get('inquireInRecordMsg?sessionToken='+this.SessionToken+'&recordId='+this.inrecordId+'').then((resp) => {
                      if (resp.data.status === 200) {
                        this.tradedetail=resp.data.data
                        this.tradedetail.yearprofit = 250*Number(this.tradedetail.profit)/day.toFixed(2)
                        this.tradedetail.starttime = moment(new Date(parseInt(this.tradedetail.starttime))).format("YYYY-MM-DD")
                        if(this.tradedetail.standardprofit == null){
                          this.tradedetail.standardprofit = 0.00
                        }
                        if(this.tradedetail.profit == null){
                          this.tradedetail.profit = 0.00
                        }
                        console.log(this.tradedetail)
                      } else {
                        console.log(resp)
                        this.$message.error(resp.data.message)
                      }
                    })
                } else {
                this.$message.error(resp.data.msg)
                }
            })
      
    },

  }
};
</script>